<template>
  <div class="hello">
    <Goodslists  :GoodsList="array" :state="flay" @Page_Length="Pagelength" :List_Height="ListHeight"></Goodslists>
  </div>         <!--       数组             样式                 分页          列表高度-->

</template>
<script>
  export default {
    name: 'HelloWorld',
    components: {},
    data () {
      return {
        array:[],//数组
        flay:'horizontal',//列表样式
        // horizontal 横 []
        //vertical  竖  []
        Page:1, //页数
        ListHeight:'',

      }
    },
    methods:{
      arr(){
        var random =  this.$Mock.Random;
        for(var i=0;i<10;i++){
          var template = {
            name:random.csentence(30,50),
            price:random.natural(5, 30),
            text: random.csentence(5, 30), //  Random.csentence( min, max )
            image: random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
            date: random.date() + ' ' + random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
          }
          this.array.push(template)
        }
      },
        // var template = {
        //   title: random.csentence(5, 30), //  Random.csentence( min, max )
        //   thumbnail_pic_s: random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
        //   author_name: random.cname(), // Random.cname() 随机生成一个常见的中文姓名
        //   date: random.date() + ' ' + random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
        // }

      Pagelength(e){
        this.Page = e;
      }
    },
    watch:{

    },
    mounted(){
      this.arr();
      this.ListHeight = window.screen.height;
      // console.log(this.$Mock)
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .hello{
    width: 100%;
    height: 100%;
  }
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>
